<!-- 顶部消息提示 -->

<template>
  <view class="top-tip-container"></view>
  <!-- 动画容器：像抽屉一样控制显示/隐藏 -->
  <transition name="slide-fade">
    <!-- 弹窗主体：v-if控制显示，:class动态切换样式 -->
    <view v-if="show" :class="['top-tip', type]">
      <!-- 图标区域：根据类型显示不同图标 -->
      <view class="tip-icon" v-if="showIcon">
        <uni-icons :type="iconType" size="16" color="#fff"></uni-icons>
      </view>
      <!-- 文字内容区域 -->
      <view class="tip-text">{{ currentText }}</view>
    </view>
  </transition>
</template>

<script setup lang="ts">
// 导入Vue响应式工具（像买了一套工具箱）
import { ref, onMounted ,watch} from 'vue';

// 定义组件参数（像快递单填写规范，规定外部能传什么信息）
const props = defineProps({
  // 弹窗文字内容（必填）
  text: {
    type: String,
    required: true,
    default: '提示信息'
  },
  // 弹窗类型：success(成功)/error(错误)/warning(警告)/info(信息)
  type: {
    type: String,
    default: 'info',
    validator: (value: string) => {
      // 验证类型是否合法（像保安检查通行证）
      return ['success', 'error', 'warning', 'info'].includes(value);
    }
  },
  // 显示时长（毫秒），0表示不自动关闭
  duration: {
    type: Number,
    default: 2000
  },
  // 是否显示图标
  showIcon: {
    type: Boolean,
    default: true
  }
});

// 内部状态管理（组件自己的小算盘）
const show = ref(false); // 控制弹窗显示/隐藏的开关
const iconType = ref('info'); // 图标类型

// 计算属性：根据类型自动切换图标和样式（像自动售货机，输入类型吐出对应商品）
watch(() => props.type, (newType: string) => {
  // 图标映射表：不同类型显示不同图标
  const iconMap = {
    success: 'checkmark-circle',
    error: 'close-circle',
    warning: 'warning',
    info: 'info'
  };
  iconType.value = iconMap[newType as keyof typeof iconMap] || 'info';
}, { immediate: true }); // 立即执行一次

// 显示弹窗的方法（像按门铃，调用就会显示）
// 定义内部响应式变量（替代直接使用props）
const currentText = ref(props.text);
const currentType = ref(props.type);
const currentDuration = ref(props.duration);

// 修改showTip方法，使其能接收参数（像给快递柜增加地址输入功能）
const showTip = (options?: {
  text?: string;
  type?: 'info'|'success'|'error'|'warning';
  duration?: number;
}) => {
  // 更新内部变量（如果传了参数就用新参数，否则用默认值）
  currentText.value = options?.text || props.text;
  currentType.value = options?.type || props.type;
  currentDuration.value = options?.duration || props.duration;

  show.value = true; // 显示弹窗

  // 定时关闭逻辑
  if (currentDuration.value > 0) {
    setTimeout(() => {
      show.value = false;
    }, currentDuration.value);
  }
};

// 隐藏弹窗的方法（手动关闭）
const hideTip = () => {
  show.value = false;
};

// 暴露方法给父组件使用（像给快递盒开个窗口，让外面能操作里面）
defineExpose({
  showTip,
  hideTip
});

// 组件挂载时执行（像快递盒出厂前的检查）
onMounted(() => {
  // 开发环境下自动显示示例（方便调试）
  if (import.meta.env.MODE === 'development') {
    console.log('顶部弹窗组件已挂载，可调用showTip()显示');
  }
});
</script>

<style scoped>
.top-tip-container{
  height:60px ;
  width: 100%;
}
/* 弹窗基础样式：像一个贴在顶部的便利贴 */
.top-tip {
  position: fixed; /* 固定定位：无论页面怎么滚，它都在顶部 */
  top: 20px; /* 距离顶部20px */
  left: 50%; /* 水平居中第一步：左边距50% */
  transform: translateX(-50%); /* 水平居中第二步：向左移动自身宽度的50% */
  display: flex; /* 弹性布局：图标和文字并排显示 */
  align-items: center; /* 垂直居中 */
  padding: 8px 16px; /* 内边距：上下8px，左右16px */
  border-radius: 4px; /* 圆角边框，像圆角便利贴 */
  color: white; /* 文字白色 */
  font-size: 14px; /* 文字大小 */
  z-index: 9999; /* 层级最高：确保不会被其他元素挡住 */
  box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* 轻微阴影，增加立体感 */
}

/* 不同类型弹窗的背景色（像交通信号灯） */
.success {
  background-color: #67c23a; /* 成功-绿色 */
}
.error {
  background-color: #f56c6c; /* 错误-红色 */
}
.warning {
  background-color: #e6a23c; /* 警告-黄色 */
}
.info {
  background-color: #409eff; /* 信息-蓝色 */
}

/* 图标样式 */
.tip-icon {
  margin-right: 8px; /* 图标和文字之间的距离 */
}

/* 动画效果：像抽屉开关一样平滑 */
/* 进入动画的开始状态和离开动画的结束状态 */
.slide-fade-enter-from, .slide-fade-leave-to {
  opacity: 0; /* 完全透明 */
  transform: translateX(-50%) translateY(-20px); /* 水平居中+向上偏移20px */
}

/* 动画过程：300毫秒内完成过渡 */
.slide-fade-enter-active, .slide-fade-leave-active {
  transition: all 0.3s ease; /* all:所有属性变化都有动画；0.3s:动画时长；ease:先快后慢 */
}
</style>